<template>
	<div>
		<div class="loading">
			<loading :show="show1" style='z-index: 99;' :text="text1"></loading>
		</div>
		
		<header>
			<nav>

				<a :href="'#'+target"> <i class="fa fa-chevron-left"></i></a>
				<div>
					<a><i class="fa fa-search"></i>&#x3000;<span>{{cate | cate}} {{name}}</span><img src="/static/img/1.png" /></a>
				</div>

			</nav>
		</header>
				
		<main>
				<div class="good">
			<ul>
				<li v-for="(item,ins) in data">
					<a :href="'#/good/info/' + item._id+'?name='+queryname+'&category='+cate">
						<img :src="'http://localhost:2200'+item.avatar[0]"/>
						<div>
						<p>{{item.name}}</p>
						<p>{{item.describe}}</p>
							<p><span>{{item.send | sendC}}</span></p>
						<p><span>¥</span>{{item.price}} <span>{{item.cellNum}}人已付款</span></p>
							<p><a :href="'#/buller/seller/'+item.king_id._id">{{item.king_id.nickName}} <span>进店 <i class="fa fa-chevron-right"></i></span></a></p>
						</div>
					</a>
				</li>
				
			</ul>
		</div>
			
		</main>
	</div>
</template>

<script>
	import $ from 'jquery';
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import { Loading } from 'vux'
	export default {
		data:function(){
			return {
				cate:"",
				name:'',
				show1: true,
				text1: 'loading',
				query:{},
				page:1,
				data:[],
				has: false,
				target:'',
				queryname:''
			}
		},
		components: {

			Loading,

		},
		watch: {　　　
			'$route' (to,from ) {　
//				console.log(from)
//				console.log(this.$route);
				console.log(from.path.query.name)
				
			},
		},
		filters: {
			cate: function(value) {
				var categorys = [
					['life', '生活用品'],
					['phone', '手机'],
					['computer', '电脑'],
					['dress', '服饰鞋帽'],
					['dresser', '美妆洗护'],

					['digital', '平板数码'],
					['household', '家电'],

					['wrap', '箱包礼品']
				];
				
				for(var i = 0;i<categorys.length;i++){
					if(categorys[i][0]==value){
						
						return categorys[i][1];
					}
				}
				
			
			},
			sendC(value){
			
				if(value == true){
					return '包邮'
				}else{
					return ''
				}
				
				
			}
		},
		computed: {
			...mapState([
				'seller', 'categorys', 'buller'
			])
		},
		mounted(){
			if(this.$route.query.name){
					this.target = '/buller/search';
					this.queryname = this.$route.query.name;
				}else{
					this.target = '/'
				}
			if(this.$route.query.name){
				this.name = this.$route.query.name;
				this.query['name']=this.$route.query.name;
			}
			if(this.$route.query.category){
	
				
				this.cate = this.$route.query.category;
				this.query['category']=this.$route.query.category;
			
			}

			axios.post('/buller/search',this.query).then((result)=>{
				this.data = result.data.data;
				if(result.data.data.length<=0){
					this.text1 = '无相关商品'
					$('.loading').fadeIn();
					
					setTimeout(function() {
								$('.loading').fadeOut();
									
							}, 1000)
					
				}
				
			}).catch((err)=>{
				console.log(err);
			})
			
			
			var that = this;
			
			
			
			
			
			$(document).on('scroll', window, function() {
				var countH = $(document).outerHeight();
				var scrH = $(window).scrollTop();
				var winH = $(window).height();
				//				console.log(countH, winH, scrH);
				if(!that.has) {

					if((scrH + winH) > (countH - 3)) {
						that.page += 1;
						that.query.page = that.page;
						that.has = true;

						axios.post("/buller/search",that.query).then(function(result) {
							if(result.data.data.length<=0){
								return;
							}
							$('.loading').fadeIn();
							setTimeout(function() {
								$('.loading').fadeOut(function() {
									result.data.data.forEach(function(item) {
									
										that.has = false;
										that.data.push(item);
									})
								});
							}, 500)

						}).catch(function(err) {
							console.log(err)
						})

					}
				}

			})
			
			
			
			
		}
	}
</script>

<style scoped>
	
	.loading {
		position: absolute;
		/*background: rgba(0,0,0,.5);*/
		width: 100%;
		height: 100%;
		z-index: 200;
		display: none;
	}
	
	header nav a {
		font-size: 13px;
		color: #eee;
	}
	
	nav {
		
		width: 100%;
		overflow: hidden;
		line-height: 37px;
		padding: 5px 10px;
		background: linear-gradient(to right, #FF9202 0%, #FF5502 100%);
	}
	
	nav>a {
		float: left;
		position: relative;
		top: 3px;
	}
	.fa-chevron-left{
		font-size: 18px;
		
	}
	nav>div {
		float: left;
		margin-left: 4%;
		width: 75%;
		position: relative;
		left: 10px;
		border-bottom: solid 1px white;
		border-radius: 5%;
	}
	
	nav>div>a {
		display: block;
		width: 100%;
		font-size: 15px;
	}
	
	nav>a>img {
		width: 30px;
		height: 30px;
		position: relative;
		top: 4px;
		border-radius: 50%;
	}
	
	nav>div i {
		margin-left: 5px;
		margin-right: 5px;
	}
	
	nav>div img {
		position: absolute;
		top: 10px;
		right: 5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}
	
	nav>span {
		float: right;
	}
	main{
		padding-bottom: 40px;
	}
	
	.good ul{
		overflow: hidden;
		
	}
	.good ul li{
		width: 100%;
		height: 180px;
		overflow: hidden;
		border-bottom: ;
	
	}
	.good ul li img{
		float: left;
		width: 40%;
		height:80%;
		margin-top: 5%;
	
	}
	.good ul li div{
		float: left;
		width: 60%;
		height: 100%;
		padding: 7% 1%;
		border-bottom:solid 1px #EEEEEE ;
		
		
	}.good ul li p{
		line-height: 18px;
		width: 100%;
		word-wrap: break-word;
		margin: 2px 0;
	}
	.good ul li div p:nth-child(1){
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.good ul li div p:nth-child(2){
		height: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 15px;
		color: #777;
	}
	
	.good ul li div p:nth-child(3) span{
		padding: 0px 2px;
		border: solid 1px goldenrod;
		border-radius: 12%;
		margin-right: 5px;
		font-size: 11px;
		color: goldenrod;
	}
	.good ul li div p:nth-child(4){
		color: red;
		font-size: 18px;
	}
	.good ul li div p:nth-child(4) span:first-child{
		font-size: 10px;
		
	}
	.good ul li div p:nth-child(4) span:last-child{
		font-size: 12px;
		color: #888;
		margin-left: 5px;
	}
	.good ul li div p:nth-child(5) a{
		display: block;
		width: 100%;
		color: #888;
		font-size: 13px;
	}
	.good ul li div p:nth-child(5) a span{
		color: #666;
		margin-left: 2%;
	}
	.good ul li div p:nth-child(5) a i{
		font-weight: 400;
		font-size: 10px;
		position: relative;
		top: -1px;
	}
</style>